<template>
   <div class="login-box">
      <h2 class="title">注册</h2>
     
     <el-form ref="form" :model="form" :rules="loginRules" label-width="80px">
       <el-form-item label="手机号" prop="phone">
         <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
       </el-form-item>
       <el-form-item label="密码" prop="pwd">
         <el-input v-model="form.pwd" show-password placeholder="请输入密码"></el-input>
       </el-form-item>

       <el-form-item label="角色" prop="roleId">
         <!-- <el-input v-model="form.role" show-password placeholder="请选择角色"></el-input> -->
          <el-select v-model="form.roleId">
              <el-option v-for="(item,index) in roleList" :key="index" :label="item.name" :value="item._id"></el-option>
          </el-select>
       </el-form-item>
       
       <el-form-item class="btn-footer">
         <el-button type="primary" @click="onSubmit" class="btn-login">注册</el-button>
         
         <el-button  type="text"  @click="toLogin"> 去登录 </el-button>
       
       </el-form-item>
     </el-form>
     </div>
 </template>
 
 <script>
 import axiosEl from '@/utils/axios';
 export default {
   data(){
     return {
        roleList:[],
         form: {
             phone: '',
             pwd: ''
         },
         loginRules:{
           phone:[
             { required: true, message: '请输入手机号', trigger: 'blur'}
             // blur: 失去焦点验证
             // change: value值改变时候验证
           ],
           pwd:[{
             required: true, message: '请输入密码', trigger: 'blur'
           }]
         }
     }
   },
   methods:{
      toLogin(){
       this.$router.push({
         path:'/login'
       })
     },
     // 获取到所有角色
     async getAllRoles(){
        let resData = await axiosEl({
          method:'get',
          url:'/roles/findRoles'
        })
        if(resData.code==1){
          this.roleList = resData.data;
        }
    },
     onSubmit() {
         // 调用登录接口
 
         this.$refs.form.validate((valid)=>{
             if(!valid) return;
             // formData 数据类型
            //  var formDatas = new FormData();
            //  for(let key in this.form) {
            //    formDatas.append(key,this.form[key])
            //  }
            axiosEl({
                 method:'post',
                 url:'/users/reg',
                 headers:{
                     'Content-Type':'multipart/form-data'
                  },
                  data:this.form
             }).then((res)=>{
                 console.log(res);
                 if(!res) return;
                 if(res.code==1){
                     //注册成功后
                    this.$router.replace('/login')
 
                 } else {
                     this.$message({
                         message: res.msg,
                         type: 'warning'
                     });
                 }
                 
             })
 
         })
 
         
       }
   },
   created(){
    this.getAllRoles()
   }
 }
 </script>
 
 <style lang="scss" scoped>

  ::v-deep .btn-footer > div {
    display: flex;
    justify-content: space-between;
    position: relative;
    width:100%;
    margin-left: 0!important;

    :nth-child(2) {
      position: absolute;
      right:0;
      top:2px;
    }
  }

    .title {
      text-align: center;
      margin-bottom: 30px;
    }
    .login-box {
      width: 400px;
      min-height: 200px;
      border: 1px solid #ccc;
      position: absolute;
      border-radius: 6px;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      padding: 30px;
      text-align: left;
      background: rgba(255,255,255,0.5);
      box-shadow: 0 0 8px 0px rgba(0,0,0,0.3);
    }
 
    
    // ::v-deep .btn-footer > div {
    //   display: flex;
    //   justify-content: space-between;
    //   width: 100%;
    //   // background: red;
    //   margin-left: 0 !important;
    //  position: relative;
    //   :nth-child(2) {
    //   position: absolute;
    //   right: 0;
    //   top: 2px;
    //   }
    // }

 </style>